<template>
  <el-scrollbar class="site-info" height="100%">
    <el-collapse v-model="activeNames" @change="handleChange" accordion>
      <el-collapse-item v-for="item in siteTree" :title="item.name" :name="item.code">
        <el-collapse v-model="childNames" style="padding-left: 30px" accordion>
          <el-collapse-item v-for="region in item.regions" :title="region.name" :name="region.code">
            <!--            <div class="item" v-for="data in region.stationInfoList">-->
            <!--              <div class="dot" :style="{background:data.online?'#3afc7b':'#f16565'}"></div>-->
            <!--              <div class="element">{{ data.id }}</div>-->
            <!--              <div class="element">{{ data.name }}</div>-->
            <!--              <div class="element">{{ data.lng }}</div>-->
            <!--              <div class="element">{{ data.lat }}</div>-->
            <!--            </div>-->
            <DataTable
              class="no-search-table-container"
              :hasIndex="false"
              :selection="false"
              :tableHead="tableHead"
              :tableData="region.stationInfoList"
              :isHasPagination="false"
              :border="false"
              @selection-change="handleSelectionChange">
              <template v-slot:pre>
                <el-table-column
                  prop="id"
                  label="站点ID"
                  width="100"
                  align="left"
                >
                  <template #default="scope">
                    <div class="dot" :style="{background:scope.row.online?'#3afc7b':'#f16565'}"></div>
                    <div class="element">{{ scope.row.id }}</div>
                  </template>
                </el-table-column>
              </template>
            </DataTable>
          </el-collapse-item>
        </el-collapse>
      </el-collapse-item>
    </el-collapse>
  </el-scrollbar>
</template>

<script lang="ts" setup>
  import {ref} from "vue";
  import {siteTree} from "@/variable/Site";

  const activeNames = ref([])
  const childNames = ref([])
  const handleChange = (val: string[]) => {
    console.log(val)
  }

  const tableHead = [
    {
      prop: 'name',
      label: '站点名称',
    }, {
      prop: 'lng',
      label: '经度',
      width: '100px'
    }, {
      prop: 'lat',
      label: '纬度',
      width: '100px'
    }
  ]
</script>
<style scoped lang="scss">
  @import "@/assets/styles/theme";

  .site-info {
    height: calc(100% - 30px);
    overflow-y: auto;

    :deep(.el-collapse) {
      --el-collapse-border-color: $table-border-bottom;
      --el-collapse-content-bg-color: $table-background;
      font-size: 15px;
    }

    :deep(.el-collapse-item__header) {
      background-color: $table-background;
      color: $table-color;
      border-bottom: $table-border-bottom;
      padding-left: 10px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background: #2c3e50;
      display: inline-block;
      margin-right: 3px;
    }

    .element {
      display: inline-block;
      color: $table-color;
    }


    .item {
      height: 40px;
      line-height: 40px;
      text-align: left;
      margin-left: 20px;
      font-size: 15px;

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #2c3e50;
        display: inline-block;
      }

      .element {
        display: inline-block;
        margin-right: 10px;
        width: 80px;
        color: $table-color;
      }
    }
  }
</style>
